.container {
  width: 100%;
  min-width: 1080px;
  height: var(--page-height);
  padding: 24px;
  // background-color: #161a1d;
  .main {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 24px;
    overflow: hidden;
    background-color: var(--bg-main);
    border-radius: 6px;
    .header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 29px;

      .title {
        font-weight: 500;
        font-size: 18px;
        font-family: PingFang SC;
        line-height: 18px;
        letter-spacing: 0;
        text-align: left;
      }
      .button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .logo {
          width: 14px;
        }
        .text {
          margin-left: 6px;
          color: var(--bd-primary);
          font-weight: 400;
          font-size: 14px;
        }
      }
    }
    .bottom {
      display: flex;
      flex: 1;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      overflow: hidden;
      .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .left {
          display: flex;
          flex-direction: column;
          width: 280px;
          height: 100%;
          border-right: 1px solid var(--bd-a50);
          .all {
            margin-bottom: 16px;
            color: var(--bd-primary);
            font-weight: 600;
            font-size: 16px;
          }
          .tree {
            flex: 1;
            width: 100%;
            overflow-y: auto;
            :global {
              // .ant-tree-treenode-selected::before {
              //   background: rgba(24, 160, 251, 0.1);
              // }
              .ant-tree-node-selected {
                // color: var(--bd-primary);
              }
              .ant-tree-switcher {
                width: 16px;
              }
              .ant-tree-switcher_close,
              .ant-tree-switcher_open {
                display: flex;
                align-items: center;
              }
            }
            .treetitle {
              display: flex;
              flex-direction: row;
              align-items: center;
              padding: 9px 0;
              .treetitleBlueText,
              .treetitleText {
                // color: #d3d4d4;
                font-weight: 400;
                font-size: 14px;
              }
              .treetitleBlueText {
                // color: var(--bd-primary);
              }
              .fileType {
                margin-left: 6px;
                .nameImg {
                  width: 14px;
                  height: 14px;
                  margin-bottom: 1px;
                }
                .nameBlueLogo,
                .nameLogo {
                  // color: #d3d4d4;
                  font-size: 12px;
                }
                .nameBlueLogo {
                  color: var(--ant-cus-font_active);
                }
              }
            }
          }
        }
        .right {
          display: flex;
          flex: 1;
          flex-direction: column;
          height: 100%;
          margin-left: 41px;
          overflow: hidden;
          .menuName {
            margin-top: 2px;
            color: var(--font-a60);
            font-size: 14px;
            .tabMenuName {
              color: var(--bd-primary);
            }
          }
          .showFileType,
          .disShowFileType {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            margin-top: 16px;
            overflow: hidden;
            color: var(--bd-primary);
            font-weight: 400;
            font-size: 14px;
            cursor: pointer;
            .nameImg {
              width: 16px;
            }
            .text {
              margin-left: 10px;
            }
          }
          .disShowFileType {
            color: var(--font-a60);
            cursor: not-allowed;
          }
          .info {
            display: flex;
            flex: 1;
            flex-direction: column;
            width: 100%;
            margin-top: 16px;
            overflow: hidden;
            .preview {
              display: flex;
              flex-direction: column;
              width: 100%;
              height: 100%;
              overflow: hidden;
              border: 1px solid var(--bd-a50);
              border-radius: 4px;
              .preview_title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 36px;
                padding-right: 14px;
                padding-left: 22px;
              }
              .preview_icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                font-size: 16px;
                cursor: pointer;
              }
              .preview_file {
                position: relative;
                flex: 1;
              }
              .file_box {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                flex-flow: wrap;
                width: 100%;
                height: 100%;
                pointer-events: none;
                > div {
                  display: inline-block;
                  width: 33.3%;
                  height: 50px;
                  color: rgba(255, 255, 255, 0.12);
                  font-size: 12px;
                  line-height: 50px;
                  transform: rotateZ(-45deg);
                }
              }
            }
            .video {
              width: 100%;
              height: 100%;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
